<template>
  <div class="top-container">
      <div class="outer-container">
        <div class="search-zone">
            <search-input></search-input>
            <span>|</span>
            <router-link to='' class="my-circle">我的圈子</router-link>
        </div>
        <div class="img-container common-adv-box">
            <img src="../../../static/img/banner.png" alt="">
        </div>
        <div class="info-container">
            <layout>
                <div slot="left" class="left">
                    <img src="../../../static/img/img_quanzi_hot.png" alt="">
                    <hot-circle :hot='true'></hot-circle>
                    <img src="../../../static/img/img_quanzi_all.png" alt="">
                    <hot-circle :hot='false'></hot-circle>
                </div>
                <div slot="right">
                    <product-aside></product-aside>
                </div>
            </layout>
        </div>
      </div>
  </div>
</template>
<script>
    import Layout from '@/components/Layout';
    import SearchInput from '@/view/Search/Input';
    import { mapState,mapMutations } from 'vuex';
    import HotCircle from '@/components/Circle/HotCircle';
    import ProductAside from '@/components/Product/ProductAside';
    export default{
        components:{
            SearchInput,
            HotCircle,
            Layout,
            ProductAside
        },
        computed:mapState(['category_list']),
        methods: {

        }
    }
</script>
<style lang="less" scoped>
    span{
        margin: 0 25px;
    }
    .my-circle{
        display: inline-block;
        padding-left: 30px;
        line-height: 40px;
        background: url(../../../static/img/icon_quanzi.png) no-repeat left center;
        background-size: 22px 22px;
    }
    .info-container{
        background: #fff;
        margin-top: 50px;
        .left{
            margin-left: 30px;
        }
        img{
            margin: 20px 0;
        }
    }
</style>

